import mainScreenshot from './cloud/bref-cloud.png';
import logo from './cloud/bref-cloud-logo.svg';
import authorPhoto from './cloud/author.jpg';
import { NextSeo } from 'next-seo';
import Pricing from './cloud/pricing';
import { CheckCircleIcon } from '@heroicons/react/20/solid';
import Features from './cloud/features';
import Faq from './cloud/faq';
import CaseStudies from './cloud/case-studies';
import HowItWorks from './cloud/how-it-works';
import Image from 'next/image';
import { useState } from 'react';
import HeroBg from './cloud/hero-bg';
import { usePlausible } from 'next-plausible';

<NextSeo
    title="Bref Cloud - Serverless PHP hosting on AWS Lambda - powerful, scalable, simple"
    description="Deploy PHP applications on AWS Lambda for unlimited scalability and enterprise-grade reliability. Get all the power of serverless without the complexity."
    openGraph={{
        images: [
            {
                url: 'https://bref.sh/cloud.png',
            }
        ]
    }}
/>

<BrefCloud />

export function BrefCloud() {
    const plausible = usePlausible();
    const [isPlaying, setIsPlaying] = useState(false);
    const [reportedVideoPlay, setReportedVideoPlay] = useState(false);
    const playVideo = () => {
        setIsPlaying(true);
        if (!reportedVideoPlay) {
            setReportedVideoPlay(true);
            plausible('Played Bref Cloud video');
        }
    };

    return (
        <div>

            <div className="relative isolate overflow-hidden bg-white">

                <HeroBg className="hidden lg:block absolute inset-x-0 -ml-14 mt-16 scale-90 -z-10 drop-shadow-xl" />

                <HeroBg className="hidden lg:block absolute top-0 right-0 -mr-14 mt-16 scale-90 -z-10 drop-shadow-xl" style={{ 'transform': 'scale(-1, 1)' }} />

                <svg aria-hidden="true" className="absolute inset-0 -z-20 size-full stroke-gray-200 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]">
                    <defs><pattern x="50%" y={-1} id="0787a7c5-978c-4f66-83c7-11c213f99cb7" width={200} height={200} patternUnits="userSpaceOnUse"><path d="M.5 200V.5H200" fill="none" /></pattern></defs><rect fill="url(#0787a7c5-978c-4f66-83c7-11c213f99cb7)" width="100%" height="100%" strokeWidth={0} />
                </svg>

                <div className="mx-auto max-w-7xl py-20 lg:py-24 px-6 lg:px-8">
                    <div className="mx-auto max-w-2xl text-center">
                        <div className="flex justify-center">
                            <Image src={logo} className="w-32" alt="Bref Cloud" />
                        </div>
                        <h1 className="mt-3 text-pretty text-4xl sm:text-5xl font-black tracking-tight text-gray-900">
                            Deploy, monitor, and run
                            <span className="lg:hidden">&nbsp;</span>
                            <br className="hidden lg:block" />
                            PHP <span className="text-blue-500">serverless</span> on AWS
                        </h1>
                        <p className="mt-6 text-pretty leading-7 sm:text-lg text-gray-600 max-w-2xl mx-auto">
                            When one server is no longer enough and Kubernetes feels too much,
                            get the reliability and <strong>insane scalability</strong> of AWS Lambda without devops or AWS expertise.
                        </p>
                        <p className="mt-3 text-pretty leading-7 sm:text-lg text-gray-600 max-w-2xl mx-auto">
                            Deploy in one command, monitor from an intuitive dashboard, and manage permissions easily.
                            Bref Cloud makes AWS and serverless <strong>accessible and simple</strong>.
                        </p>
                        <div className="mt-8 flex items-center justify-center gap-x-6">
                            <a
                                href="https://bref.cloud/register"
                                className="rounded-md bg-blue-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
                            >
                                Get started
                            </a>
                            <a href="https://calendly.com/bref-enterprise/bref-cloud-demo" className="text-sm/6 font-semibold text-gray-900">
                                Schedule a demo <span aria-hidden="true">→</span>
                            </a>
                        </div>
                    </div>
                    <div className="mx-auto max-w-5xl mt-16 sm:mt-20 flex">
                        <div
                            className="w-full -m-2 rounded-xl bg-gray-900/5 p-2 ring-1 ring-inset ring-gray-900/10 lg:-m-4 lg:rounded-2xl lg:p-4">
                            {isPlaying ? (
                                <div className="w-full max-w-full overflow-hidden rounded-md shadow-2xl ring-1 ring-gray-900/10 aspect-video bg-black">
                                    <iframe
                                        src="https://www.youtube.com/embed/mU6Wlcetl9M?autoplay=1&rel=0"
                                        title="Bref Cloud video"
                                        allow="autoplay; encrypted-media; picture-in-picture"
                                        allowFullScreen
                                        className="h-full w-full aspect-video"
                                    />
                                </div>
                            ) : (
                                <button
                                    type="button"
                                    onClick={() => playVideo()}
                                    className="group relative focus:outline-none"
                                    aria-label="Play video"
                                >
                                    <Image
                                        alt="Bref Cloud screenshot"
                                        src={mainScreenshot}
                                        className="w-[76rem] rounded-md shadow-2xl ring-1 ring-gray-900/10 group-hover:opacity-80 transition-opacity"
                                        priority={true}
                                    />
                                    <span className="pointer-events-none absolute inset-0 flex items-center justify-center">
                                        <span className="inline-flex items-center justify-center rounded-full bg-gray-50 group-hover:bg-white size-14 md:size-20 shadow-xl ring-1 ring-gray-900/10 transition-colors">
                                            <svg aria-hidden="true" className="size-10 md:size-16 text-gray-800" viewBox="0 0 24 24" fill="currentColor">
                                                <path d="M8 5v14l11-7z" />
                                            </svg>
                                        </span>
                                    </span>
                                </button>
                            )}
                        </div>
                    </div>
                </div>
            </div>

            <div className="pt-4 pb-20 sm:pb-24">
                <div className="mx-auto max-w-4xl px-6 lg:px-8 text-lg text-pretty leading-8 text-gray-700">
                    <p>
                        Choosing infrastructure is usually a compromise between: <strong className="text-gray-900">reliable</strong>, <strong className="text-gray-900">powerful</strong>, or <strong className="text-gray-900">simple</strong>.
                    </p>
                    <p className="mt-4">
                        Pick two.
                    </p>
                    <p className="mt-4">
                        Building advanced infrastructure yourself requires expertise and time.
                        There are also really cool PaaS out there, but they don't have the same track record as major cloud providers.
                    </p>
                    <p className="mt-4">
                        Bref Cloud goes for all three.
                    </p>
                    <ul className="mt-6 space-y-6">
                        <li className="flex gap-x-3">
                            <CheckCircleIcon aria-hidden="true" className="mt-1.5 size-5 flex-none text-blue-500" />
                            <span>
                                <strong className="text-gray-900">Reliable</strong>: your apps are hosted on AWS, the most reliable cloud provider in the world. More specifically, they run serverless on AWS Lambda: high availability, self-healing, and extremely secure environments out of the box. Bref itself is 8 years-old, open-source, and battle-tested running the most critical apps. Even <a className="underline" href="https://bref.sh/docs/case-studies/treezor">banks run on Bref</a>.
                            </span>
                        </li>
                        <li className="flex gap-x-3">
                            <CheckCircleIcon aria-hidden="true" className="mt-1.5 size-5 flex-none text-blue-500" />
                            <span>
                                <strong className="text-gray-900">Powerful</strong>: Run PHP applications at virtually unlimited scale using serverless. Get everything your application needs out of the box: databases, queues, storage, caches, cron, CDN, event buses, logging, metrics… If you fancy, you can also use the entire AWS ecosystem without limitations.
                            </span>
                        </li>
                        <li className="flex gap-x-3">
                            <CheckCircleIcon aria-hidden="true" className="mt-1.5 size-5 flex-none text-blue-500" />
                            <span>
                                <strong className="text-gray-900">Simple</strong>: Bref Cloud makes the power of AWS accessible to all. Deploy with a single command, monitor from an intuitive dashboard, and manage your team without AWS IAM complexity. Perfect for PHP developers who want to build, not configure.
                            </span>
                        </li>
                    </ul>
                    <div className="mt-10 flex items-center gap-x-6">
                        <a
                            href="https://bref.cloud/register"
                            className="rounded-md bg-blue-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
                        >
                            Start free trial
                        </a>
                        <a href="https://calendly.com/bref-enterprise/bref-cloud-demo" className="text-sm/6 font-semibold text-gray-900">
                            Schedule a demo <span aria-hidden="true">→</span>
                        </a>
                    </div>
                </div>
            </div>

            <Features />

            <HowItWorks />

            <Pricing />

            <div className="bg-white px-6 py-32 lg:px-8">
                <div className="mx-auto max-w-2xl text-lg text-pretty leading-8 text-gray-700">
                    <p className="text-base/7 font-semibold text-blue-500">Your cloud, your control</p>
                    <h2 className="mt-2 text-pretty text-4xl sm:text-5xl font-black tracking-tight text-gray-950">
                        No markup, no lock-in
                    </h2>
                    <p className="mt-6">
                        Bref Cloud deploys your applications to <strong>your AWS account</strong>, with zero markup on AWS prices.
                        With serverless pay-as-you-go pricing, your hosting bill from AWS could be as low as $0.
                        Learn more about <a className="link" href="/docs/serverless-costs">serverless hosting costs</a>.
                    </p>
                    <p className="mt-6">
                        Under the hood, Bref Cloud uses <strong>standard AWS CloudFormation</strong> and follows <a className="link" href="https://bref.sh/docs/cloud-security">AWS best practices</a>, meaning you're never locked in. You can eject from Bref Cloud at any point if you prefer to manage the infrastructure yourself.
                        You are <a className="link" href="https://bref.sh/docs/vendor-lock-in">not even locked in AWS Lambda</a>.
                    </p>
                    <div className="mt-10 flex items-center gap-x-6">
                        <a
                            href="https://bref.cloud/register"
                            className="rounded-md bg-blue-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
                        >
                            Get started
                        </a>
                        <a href="https://calendly.com/bref-enterprise/bref-cloud-demo" className="text-sm/6 font-semibold text-gray-900">
                            Schedule a demo <span aria-hidden="true">→</span>
                        </a>
                    </div>
                </div>
            </div>

            <CaseStudies />

            <div className="py-24 sm:py-28">
                <div className="mx-auto max-w-4xl px-6 lg:px-8 text-lg text-pretty leading-8 text-gray-700">
                    <h2 className="mb-10 text-pretty text-3xl font-black tracking-tight text-gray-950">
                        Expert AWS support&nbsp;
                        <span className="text-amber-800/80">built-in</span>
                    </h2>
                    <div className="w-full flex flex-col-reverse md:flex-row gap-6 items-start">
                        <div className="flex-grow text-pretty">
                            <p>
                                Hi! I'm Matthieu, PHP enthusiast, <a className="link" href="https://github.com/mnapoli">open-source developer</a> since 2003, and <a className="link" href="https://aws.amazon.com/developer/community/heroes/matthieu-napoli/">AWS Serverless Hero</a>.
                                After years of setting up servers and containers, I moved to serverless and started Bref {(new Date).getFullYear() - 2017} years ago.
                            </p>
                            <p className="mt-4">
                                Since 2017, I've built countless projects on AWS Lambda, but also helped many others do the same. I've seen a lot, from small projects, to large legacy monoliths, or high-traffic microservices.
                                I <a className="link" href="https://mnapoli.fr">blog</a>, <a className="link" href="https://mnapoli.fr/presentations/">talk</a>, and <a className="link" href="https://serverless-visually-explained.com/">teach</a> about serverless.
                            </p>
                            <p className="mt-4">
                                <strong>Bref Cloud is more than just software</strong>.&nbsp;
                                <span style={{
                                    background: 'linear-gradient(120deg, #fef08a 0%, #fef08a 100%)',
                                    backgroundRepeat: 'no-repeat',
                                    backgroundSize: '100% 40%',
                                    backgroundPosition: '0 88%'
                                }}>
                                    It comes with expert AWS support
                                </span> to pick the best infrastructure for your projects.
                            </p>
                            <p className="mt-4 text-sm">
                                Got questions? Get in touch via <a className="link" target="_blank" href="mailto:support@bref.sh">email</a>, <a className="link" target="_blank" href="https://bref.sh/slack">Slack</a>, or <a className="link" href="https://calendly.com/bref-enterprise/bref-cloud-demo" target="_blank">Zoom</a>.
                            </p>
                        </div>
                        <div className="aspect-square flex-none rounded-full w-32 h-32 md:w-64 md:h-64 lg:w-80 lg:h-80 border border-gray-500 shadow-lg overflow-hidden">
                            <img src={authorPhoto} alt="Matthieu Napoli" className="object-cover h-full w-full" />
                        </div>
                    </div>
                </div>
            </div>

            <Faq />

        </div>
    )
}
